<template>
    <div class="biji" ref="biji" @scroll="binScroll">
        <div ref="box">
        <div class="item" v-for="(item,i) in data" :key="i">
            <div class="left">
                <span class="ri">{{item.day_text}}/</span>
                <span class="yue">{{item.month_text}}</span>
            </div>
            <div class="right">
                <div class="img" v-for="(v,ind) in item.day_list" :key="ind">
                    <img :src="v.image_u" alt="" @click="bint3(v.id)">
                </div>
            </div>
        </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:'biji',
        data() {
            return {
                data:[],
                id:0,
                timer:0
            }
        },
        created(){
            this.id = this.$route.query.id
            this.axios.get(`https://apis.netstart.cn/douguo/user/usernotescalendar/${this.id}/0/10`). then((response) => {
            this.data = response.data.result.notes
            })
        },
        activated(){
            this.id = this.$route.query.id
            this.axios.get(`https://apis.netstart.cn/douguo/user/usernotescalendar/${this.id}/0/10`). then((response) => {
            this.data = response.data.result.notes
            })
        },
        methods:{
            binScroll(){
                let length = this.data.length
                clearTimeout(this.timer)
                this.timer = setTimeout(()=>{
                    if (this.$refs.box.scrollHeight-this.$refs.biji.scrollTop===this.$refs.biji.clientHeight) {
                        this.axios.get(`https://apis.netstart.cn/douguo/user/usernotescalendar/${this.id}/${length}/10`). then((response) => {
                            if (response.data.state=== "success") {
                                this.data.push(...response.data.result.notes)  
                            }
                        })
                    }
                },300)
            },
            bint3(id){
                this.$router.push({name:'type3',query:{id}})
            },
        }
    }
</script>

<style lang="less" scoped>
    .biji{
        height: calc(100vh - 331px);
        overflow: auto;
    }
    .item{
        display: flex;
        padding-bottom: 1px;
        .left{
            width: 20%;
            .ri{
                font-size: 18px;
            }
            .yue{
                font-size: 12px;
                margin-left: 5px;
            }
        }
        .right{
            width: 80%;
            display: flex;
            .img{
                width: 100px;
                height: 100px;
                position: relative;
                overflow: hidden;
                margin-right: 1px;
                img{
                    width: 120%;
                    position: absolute;

                }
            }
        }
    }
</style>